<template>
  <div class="config-card">
    <!-- 卡片头部：标题区域与折叠控制 -->
    <div class="card-header" @click="$emit('toggle')">
      <div class="header-left">
        <el-icon class="section-icon">
          <component :is="resolveIcon(icon)" />
        </el-icon>
        <h3>{{ title }}</h3>
      </div>
      <div class="header-right">
        <span class="section-desc">{{ description }}</span>
        <el-icon class="toggle-icon" :class="{ 'is-active': !collapsed }">
          <ArrowDown />
        </el-icon>
      </div>
    </div>

    <!-- 卡片内容：仅在非折叠状态下显示 -->
    <div class="card-body" v-show="!collapsed">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import * as Icons from '@element-plus/icons-vue'

/**
 * 组件属性定义
 */
const props = defineProps({
  /**
   * 卡片标题
   */
  title: {
    type: String,
    required: true,
  },

  /**
   * 卡片描述信息
   */
  description: {
    type: String,
    default: '',
  },

  /**
   * 图标名称（Element Plus图标）
   */
  icon: {
    type: String,
    default: 'Document',
  },

  /**
   * 是否折叠
   */
  collapsed: {
    type: Boolean,
    default: false,
  },
})

/**
 * 组件事件
 */
defineEmits(['toggle'])

/**
 * 根据图标名称解析为组件
 * @param {string} name - 图标名称
 * @returns {Component} - 对应的图标组件
 */
const resolveIcon = (name) => {
  // 如果图标在Element Plus图标库中存在，则返回对应组件
  return Icons[name] || Icons.Document
}
</script>

<style lang="scss" scoped>
/**
 * 配置卡片样式
 */
.config-card {
  background: var(--el-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  /**
   * 卡片头部样式
   */
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(
      to right,
      var(--el-color-primary-light-9),
      rgba(255, 255, 255, 0.95)
    );
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--el-border-color-light);
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--el-color-primary-light-8);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;

      .section-icon {
        font-size: 32px;
        color: var(--el-color-primary);
        background-color: white;
        border-radius: 50%;
        padding: 8px;
        box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.2);
      }

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;

      .section-desc {
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }

      .toggle-icon {
        font-size: 16px;
        color: var(--el-text-color-secondary);
        transition: transform 0.3s ease;

        &.is-active {
          transform: rotate(180deg);
        }
      }
    }
  }

  /**
   * 卡片内容区域样式
   */
  .card-body {
    padding: 32px;
  }
}

/**
 * 响应式样式调整
 */
@media (max-width: 768px) {
  .config-card {
    .card-header {
      padding: 16px;

      .header-left {
        gap: 10px;

        .section-icon {
          font-size: 22px;
          padding: 4px;
        }

        h3 {
          font-size: 16px;
        }
      }

      .header-right {
        .section-desc {
          display: none;
        }
      }
    }

    .card-body {
      padding: 20px 16px;
    }
  }
}
</style>
